<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">  <!-- 设置字符编码为 UTF-8 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后台管理</title>
  <link rel="icon" href="/img/favicon.png" type="image/png">

  <script src="libs/axios.min.js"></script>
  <script src="libs/vue.global.js"></script>
  <script src="libs/index.full.js"></script>
  <script src="libs/echarts.min.js"></script>
  <script src="js/navbar.js"></script>
  <link rel="stylesheet" href="libs/index.css">
  <link rel="stylesheet" href="css/navbar.css">
  <link rel="stylesheet" href="css/backstage_management.css">

</head>
<body>
<div id="app" class="full_container">
  <div id="navbar" class="navbar"></div>
  <div class="app_container--main">
    <!-- 左侧导航栏 -->
    <div class="app_container--left">
      <el-menu
              :default-active="activeMenu"
              class="el-menu"
              @select="handleSelect"
              background-color="#2d3a4b"
              text-color="#fff"
              active-text-color="#ffd04b"
      >
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="main">主页管理</el-menu-item>
        <el-menu-item index="news">资讯管理</el-menu-item>
        <el-menu-item index="posts">贴文管理</el-menu-item>
        <el-menu-item index="users">用户管理</el-menu-item>
        <el-menu-item index="products">商品管理</el-menu-item>
        <el-menu-item index="other">其他管理</el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容区 -->
    <div class="app_container--right">
      <div class="item" v-if="activeMenu === 'home'">
        <div class="dashboard">
          <div class="chart-card">
            <h3>系统数据分布</h3>
            <div id="pieChart" style="height: 400px;"></div>
          </div>
          <div class="chart-card">
            <h3>最近7日访问趋势</h3>
            <div id="lineChart" style="height: 400px;"></div>
          </div>
        </div>
      </div>
      <div class="item" v-else-if="activeMenu === 'news'">
        <div class="item_header">
          <el-button @click="handleAdd">新增</el-button>
          <el-button @click="handleUpdate">修改</el-button>
          <el-button @click="handleDelete">删除</el-button>
          <el-input v-model="selectInput" class="select-input"></el-input>
          <el-button @click="handleSearch">查找</el-button>
        </div>
        <div class="item_main">
          <el-table
                  ref="selectedArticleRows"
                  :data="articleList"
                  height="450px"
                  style="width: 100%"
                  border
                  stripe
                  :header-cell-style="{ textAlign: 'center',color:'rgb(51.2, 126.4, 204)' }"
                  @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"  width="55" ></el-table-column>

            <el-table-column prop="id" label="ID" width="60" ></el-table-column>

            <el-table-column label="标题" width="350px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.title" placeholder="请输入标题" />
              </template>
            </el-table-column>

            <el-table-column label="内容">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.content" placeholder="请输入内容" />
              </template>
            </el-table-column>

            <el-table-column label="作者" width="100px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.author" placeholder="请输入作者" />
              </template>
            </el-table-column>

            <el-table-column label="图片链接" width="120px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.imageUrl" placeholder="图片 URL" />
              </template>
            </el-table-column>

            <el-table-column prop="publishedAt" label="发布时间" width="200px"></el-table-column>
              <el-table-column prop="createdAt" label="创建时间" width="200px"></el-table-column>
              <el-table-column prop="updatedAt" label="更新时间" width="200px"></el-table-column>
          </el-table>
        </div>
        <div class="item_footer">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  @current-change="handlePageChange"
                  style="margin-top: 10px"
          />
        </div>
        <el-dialog
                title="新增文章"
                v-model="dialogVisible"
                @close="resetForm"
        >
          <el-form :model="form" ref="form" label-width="100px">
            <el-form-item label="标题">
              <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="内容">
              <el-input v-model="form.content" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="form.author" placeholder="请输入作者" />
            </el-form-item>
            <el-form-item label="图片链接">
              <el-input v-model="form.imageUrl" placeholder="图片 URL" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="item" v-else-if="activeMenu === 'posts'">
        <div class="item_header">
          <el-button @click="handleAdd">新增</el-button>
          <el-button @click="handleUpdate2">修改</el-button>
          <el-button @click="handleDelete2">删除</el-button>
          <el-input v-model="selectInput" class="select-input"></el-input>
          <el-button @click="handleSearch2">查找</el-button>
        </div>
        <div class="item_main">
          <el-table
                  ref="selectedPostRows"
                  :data="postList"
                  height="450px"
                  style="width: 100%"
                  border
                  stripe
                  :header-cell-style="{ textAlign: 'center',color:'rgb(51.2, 126.4, 204)' }"
                  @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"  width="55" ></el-table-column>

            <el-table-column prop="id" label="ID" width="60" ></el-table-column>

            <el-table-column label="标题" width="350px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.title" placeholder="请输入标题" />
              </template>
            </el-table-column>

            <el-table-column label="内容">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.content" placeholder="请输入内容" />
              </template>
            </el-table-column>

            <el-table-column label="地区" width="100px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.region" placeholder="请输入作者" />
              </template>
            </el-table-column>

            <el-table-column label="图片数组" width="120px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.image" placeholder="图片链接数组" />
              </template>
            </el-table-column>

            <el-table-column prop="createdAt" label="创建时间" width="200px"></el-table-column>
          </el-table>
        </div>
        <div class="item_footer">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  @current-change="handlePageChange"
                  style="margin-top: 10px"
          />
        </div>
        <el-dialog
                title="新增贴文"
                v-model="dialogVisible"
                @close="resetForm"
        >
          <el-form :model="form" ref="form" label-width="100px">
            <el-form-item label="标题">
              <el-input v-model="form.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="内容">
              <el-input v-model="form.content" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="图片链接数组">
              <el-input v-model="form.image" placeholder="图片数组 URL" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSave2">保存</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="item" v-else-if="activeMenu === 'users'" >
        <div class="item_header">
          <el-button @click="handleAdd">新增</el-button>
          <el-button @click="handleUpdate3">修改</el-button>
          <el-button @click="handleDelete3">删除</el-button>
          <el-input v-model="selectInput" class="select-input"></el-input>
          <el-button @click="handleSearch3">查找</el-button>
        </div>
        <div class="item_main">
          <el-table
                  ref="selectedUserRows"
                  :data="userList"
                  height="450px"
                  style="width: 100%"
                  border
                  stripe
                  :header-cell-style="{ textAlign: 'center',color:'rgb(51.2, 126.4, 204)' }"
                  @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"  width="55" ></el-table-column>

            <el-table-column prop="id" label="ID" width="60" ></el-table-column>

            <el-table-column label="用户名" width="350px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.username" placeholder="请输入姓名" />
              </template>
            </el-table-column>

            <el-table-column label="密码">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.password" placeholder="请输入密码" />
              </template>
            </el-table-column>

            <el-table-column label="邮箱" width="100px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.email" placeholder="请输入邮箱" />
              </template>
            </el-table-column>

            <el-table-column label="电话号码" width="120px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.phone" placeholder="请输入电话号码" />
              </template>
            </el-table-column>

            <el-table-column prop="sex" label="性别"></el-table-column>
            <el-table-column label="权限等级" width="120px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.premissionLevel" />
              </template>
            </el-table-column>
            <el-table-column label="角色" width="120px">
              <template #default="scope">
                <el-select v-model="scope.row.role" :placeholder="'选择用户'">
                  <el-option label="SUPER_ADMIN" value="SUPER_ADMIN"></el-option>
                  <el-option label="ADMIN" value="ADMIN"></el-option>
                  <el-option label="USER" value="USER"></el-option>
                  <el-option label="GUEST" value="GUEST"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120px">
              <template #default="scope">
                <el-select v-model="scope.row.status" :placeholder="'选择状态'">
                  <el-option label="ACTIVE" value="ACTIVE"></el-option>
                  <el-option label="DISABLED" value="DISABLED"></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="item_footer">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  @current-change="handlePageChange"
                  style="margin-top: 10px"
          />
        </div>
        <el-dialog
                title="新增用户"
                v-model="dialogVisible"
                @close="resetForm"
        >
          <el-form :model="form" ref="form" label-width="100px">
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="用户名">
              <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="form.phone" placeholder="请输入内容" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSave3">保存</el-button>
          </div>
        </el-dialog>
      </div >
      <div class="item" v-else-if="activeMenu === 'products'">
        <div class="item_header">
          <el-button @click="handleAdd">新增</el-button>
          <el-button @click="handleUpdate4">修改</el-button>
          <el-button @click="handleDelete4">删除</el-button>
          <el-input v-model="selectInput" class="select-input"></el-input>
          <el-button @click="handleSearch4">查找</el-button>
        </div>
        <div class="item_main">
          <el-table
                  ref="selectedGoodRows"
                  :data="goodList"
                  style="width: 100%"
                  height="450px"
                  border
                  stripe
                  :header-cell-style="{ textAlign: 'center',color:'rgb(51.2, 126.4, 204)' }"
                  @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"  width="55" ></el-table-column>

            <el-table-column prop="id" label="ID" width="60" ></el-table-column>

            <el-table-column label="商品名称" width="350px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.name" placeholder="请输入商品名" />
              </template>
            </el-table-column>

            <el-table-column label="所需积分">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.points" placeholder="请输入所需积分" />
              </template>
            </el-table-column>

            <el-table-column label="数量" width="100px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.quantity" placeholder="请输入数量" />
              </template>
            </el-table-column>

            <el-table-column label="产品介绍" width="120px">
              <template #default="scope">
                <el-input class="no-border-input" v-model="scope.row.content" placeholder="请输入产品介绍" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="item_footer">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total="total"
                  @current-change="handlePageChange"
                  style="margin-top: 10px"
          />
        </div>
        <el-dialog
                title="新增商品"
                v-model="dialogVisible"
                @close="resetForm"
        >
          <el-form :model="form" ref="form" label-width="100px">
            <el-form-item label="商品名称">
              <el-input v-model="form.name" placeholder="请输入商品名称" />
            </el-form-item>
            <el-form-item label="所需积分">
              <el-input v-model="form.points" placeholder="请输入所需积分" />
            </el-form-item>
            <el-form-item label="数量">
              <el-input v-model="form.quantity" placeholder="请输入剩余数量" />
            </el-form-item>
            <el-form-item label="商品介绍">
              <el-input v-model="form.content" placeholder="请输入产品介绍" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="handleSave4">保存</el-button>
          </div>
        </el-dialog>
      </div>
      <div class="item" v-else-if="activeMenu === 'other'">这里是其他管理</div>
    </div>
  </div>
</div>

</body>
<script>
  const {createApp} = Vue;

  const {ElMessage} = ElementPlus;

  createApp({
    data(){
      return{
        activeMenu: 'home',
        currentUserId:0,
        currentPage: 1,
        pageSize: 10,
        total: 0,
        selectInput:'',
        articleList:[],
        selectedArticleRows:[],
        postList:[],
        selectedPostRows:[],
        userList:[],
        selectedUserRows:[],
        goodList:[],
        selectedGoodRows:[],
        dialogVisible: false,
        form: {},
        permissionLevel:0,
        userCount: 1200,
        postCount: 800,
        articleCount: 600,
        goodsCount: 300,
        visitCount: 450, // 今日访问数
      }
    },
    mounted() {
      this.initPieChart();
      this.getCurrentUser();
      this.getVisit()
    },
    methods: {
      getVisit(){
        const today = new Date();
        const currentDate = today.toISOString().split('T')[0]; // 格式：yyyy-MM-dd
        axios.get('http://localhost:8080/visitLog/stats', {
          params: {
            date: currentDate
          }
        }).then(res => {
          this.visitData = res.data.data;

          // 处理数据，准备图表的数据
          this.processChartData();

          // 渲染图表
          this.initLineChart();
        });
      },
      processChartData() {
        // 提取日期和访问量
        let labels = [];
        let counts = [];

        this.visitData.forEach(item => {
          labels.push(item.day);  // 日期
          counts.push(item.count);  // 访问量
        });

        // 填充图表的 x 轴标签和 y 轴数据
        this.chartLabels = labels;
        this.chartData = counts;
      },
      initPieChart() {
        const pieChart = echarts.init(document.getElementById('pieChart'));
        const option = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [
            {
              name: '数据占比',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'outside'
              },
              data: [
                { value: this.userCount, name: '用户数量' },
                { value: this.postCount, name: '贴文数量' },
                { value: this.articleCount, name: '文章数量' },
                { value: this.goodsCount, name: '商品数量' }
              ]
            }
          ]
        };
        pieChart.setOption(option);
      },
      initLineChart() {
        const lineChart = echarts.init(document.getElementById('lineChart'));
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.chartLabels
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '访问量',
              data: this.chartData,
              type: 'line',
              smooth: false,
              areaStyle: {}
            }
          ]
        };
        lineChart.setOption(option);
      },
      getCurrentUser() {
        axios.get('http://localhost:8080/chat/currentUser')
                .then(response => {
                  if (response.data.code === 200) {
                    this.currentUserId = response.data.data.id;
                    this.permissionLevel = response.data.data.permissionLevel;
                    console.log(this.currentUserId);
                    this.getData();
                    this.getData2();
                    this.getData3();
                    this.getData4();
                  } else {
                    console.warn("未登录，跳转到登录页");
                    window.location.href = "/login.html"; // 重定向到登录页
                  }
                })
                .catch(error => console.error("获取当前用户失败:", error));
      },
      formatDate(timestamp) {
        if (!timestamp) return '';
        const date = new Date(timestamp);
        const pad = (n) => (n < 10 ? '0' + n : n);
        const Y = date.getFullYear();
        const M = pad(date.getMonth() + 1);
        const D = pad(date.getDate());
        const h = pad(date.getHours());
        const m = pad(date.getMinutes());
        const s = pad(date.getSeconds());
        return `${Y}-${M}-${D} ${h}:${m}:${s}`;
      },
      handlePageChange(page) {
        // 更新当前页码
        this.currentPage = page;
        // 重新请求数据，可以通过分页参数进行请求
        if (this.activeMenu === 'news') {
          this.getData(); // 加载文章
        } else if (this.activeMenu === 'posts') {
          this.getData2(); // 加载社区帖子
        }else if (this.activeMenu === 'users') {
          this.getData3(); // 加载用户列表
        }else if (this.activeMenu === 'products') {
          this.getData4(); // 加载商品列表
        }
      },
      getData(){
        axios.get(`http://localhost:8080/article/list`,{
          params:{
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then(response => {
                  this.articleList = response.data.records.map(item => {
                    return {
                      ...item,
                      publishedAt: this.formatDate(item.publishedAt),
                      createdAt: this.formatDate(item.createdAt),
                      updatedAt: this.formatDate(item.updatedAt),
                    };
                  });
                  this.total = response.data.total;
                })
                .catch(error => {
                  console.error('获取签到次数失败', error);
                });
      },
      getData2(){
        axios.get(`http://localhost:8080/community`,{
          params:{
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then(response => {
                  this.postList = response.data.data.records.map(item => {
                    return {
                      ...item,
                      createdAt: this.formatDate(item.createdAt),
                    };
                  });
                  this.total = response.data.data.total;
                })
                .catch(error => {
                  console.error('获取贴文数据失败', error);
                });
      },
      getData3(){
        axios.get(`http://localhost:8080/user`,{
          params:{
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then(response => {
                  this.userList = response.data.data.records.map(item => {
                    return {
                      ...item,
                      createdTime: this.formatDate(item.createdTime),
                    };
                  });
                  this.total = response.data.data.total;
                })
                .catch(error => {
                  console.error('获取用户数据失败', error);
                });
      },
      getData4(){
        axios.get(`http://localhost:8080/goods`,{
          params:{
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then(response => {
                  this.goodList = response.data.data.records;
                  this.total = response.data.data.total;
                })
                .catch(error => {
                  console.error('获取用户数据失败', error);
                });
      },
      handleSelectionChange(val) {
        if (this.activeMenu === 'news') {
          this.selectedArticleRows = val; // 更新选中的行
        } else if (this.activeMenu === 'posts') {
          this.selectedPostRows = val; // 更新选中的行
        }else if (this.activeMenu === 'users') {
          this.selectedUserRows = val; // 更新选中的行
        }else if (this.activeMenu === 'products') {
          this.selectedGoodRows = val;
        }
      },
      handleSelect(key) {
        if (key === 'users' && this.permissionLevel !== 4) {
          ElMessage.warning('权限不足，无法访问');
          return;
        }
        this.activeMenu = key;
      },
      // 新增方法
      handleAdd() {
        this.dialogVisible = true;
        this.form = {};
      },

      // 修改方法
      handleUpdate() {
        if (this.selectedArticleRows.length === 1) {
          const selectedArticle = this.selectedArticleRows[0];
          axios.put('http://localhost:8080/article',selectedArticle)
                  .then(response =>{
                    if(response.data.code === 200){
                      ElMessage.success("修改成功")
                    }
                  })
                  .catch(error => ElMessage.error("修改失败",error))
        } else {
          ElMessage.error('请先选择一条记录');
        }
      },

      // 删除方法
      handleDelete() {
        console.log(this.selectedArticleRows);
        if (this.selectedArticleRows.length > 0) {
          this.$confirm('确定删除选中的文章吗?', '提示', {
            type: 'warning',
          }).then(() => {
            const idList = this.selectedArticleRows.map((row) => row.id);
            const params = idList.map(id => `idList=${id}`).join('&');
            axios.delete(`http://localhost:8080/article?${params}`)
                    .then((response) => {
                      ElMessage.success('删除成功');
                      this.getData();
                    })
                    .catch((error) => {
                      ElMessage.error('删除失败');
                    });
          });
        } else {
          this.ElMessage.error('请先选择记录');
        }
      },

      // 查找方法
      handleSearch() {
        axios.get('http://localhost:8080/article/searchList', {
          params: {
            query: this.selectInput,
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then((response) => {
                  console.log(response.data)
                  this.articleList = response.data.data.records;
                  this.total = response.data.data.total;
                })
                .catch((error) => {
                  console.error('查找失败', error);
                });
      },

      // 保存方法（新增或修改）
      handleSave() {
        axios.post(`http://localhost:8080/article`, this.form)
                .then((response) => {
                  ElMessage.success('保存成功');
                  this.dialogVisible = false;
                  this.getData();
                })
                .catch((error) => {
                  ElMessage.error('保存失败');
                });
      },
      // 修改方法
      handleUpdate2() {
        if (this.selectedPostRows.length === 1) {
          const selectedPost = this.selectedPostRows[0];
          axios.put('http://localhost:8080/community',selectedPost)
                  .then(response =>{
                    if(response.data.code === 200){
                      ElMessage.success("修改成功")
                    }
                  })
                  .catch(error => ElMessage.error("修改失败",error))
        } else {
          ElMessage.error('请先选择一条记录');
        }
      },

      // 删除方法
      handleDelete2() {
        console.log(this.selectedPostRows);
        if (this.selectedPostRows.length > 0) {
          this.$confirm('确定删除选中的帖子吗?', '提示', {
            type: 'warning',
          }).then(() => {
            const idList = this.selectedPostRows.map((row) => row.id);
            const params = idList.map(id => `idList=${id}`).join('&');
            axios.delete(`http://localhost:8080/community?${params}`)
                    .then((response) => {
                      ElMessage.success('删除成功');
                      this.getData2();
                    })
                    .catch((error) => {
                      ElMessage.error('删除失败');
                    });
          });
        } else {
          this.ElMessage.error('请先选择记录');
        }
      },

      // 查找方法
      handleSearch2() {
        axios.get('http://localhost:8080/community/searchList', {
          params: {
            query: this.selectInput,
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then((response) => {
                  this.postList = response.data.data.records;
                  this.total = response.data.data.total;
                })
                .catch((error) => {
                  console.error('查找失败', error);
                });
      },

      // 保存方法（新增或修改）
      handleSave2() {
        axios.post(`http://localhost:8080/community`, this.form)
                .then((response) => {
                  ElMessage.success('保存成功');
                  this.dialogVisible = false;
                  this.getData();
                })
                .catch((error) => {
                  ElMessage.error('保存失败');
                });
      },
      // 修改方法
      handleUpdate3() {
        if (this.selectedUserRows.length === 1) {
          const selectedUser = this.selectedUserRows[0];
          axios.put('http://localhost:8080/user',selectedUser)
                  .then(response =>{
                    if(response.data.code === 200){
                      ElMessage.success("修改成功")
                    }
                  })
                  .catch(error => ElMessage.error("修改失败",error))
        } else {
          ElMessage.error('请先选择一条记录');
        }
      },

      // 删除方法
      handleDelete3() {
        console.log(this.selectedUserRows);
        if (this.selectedUserRows.length > 0) {
          this.$confirm('确定删除选中的用户吗?', '提示', {
            type: 'warning',
          }).then(() => {
            const idList = this.selectedUserRows.map((row) => row.id);
            const params = idList.map(id => `idList=${id}`).join('&');
            axios.delete(`http://localhost:8080/user?${params}`)
                    .then((response) => {
                      ElMessage.success('删除成功');
                      this.getData3();
                    })
                    .catch((error) => {
                      ElMessage.error('删除失败');
                    });
          });
        } else {
          this.ElMessage.error('请先选择记录');
        }
      },

      // 查找方法
      handleSearch3() {
        axios.get('http://localhost:8080/user/searchList', {
          params: {
            query: this.selectInput,
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then((response) => {
                  this.userList = response.data.data.records;
                  this.total = response.data.data.total;
                })
                .catch((error) => {
                  console.error('查找失败', error);
                });
      },

      // 保存方法（新增或修改）
      handleSave3() {
        axios.post(`http://localhost:8080/user`, this.form)
                .then((response) => {
                  ElMessage.success('保存成功');
                  this.dialogVisible = false;
                  this.getData3();
                })
                .catch((error) => {
                  ElMessage.error('保存失败');
                });
      },
      // 修改方法
      handleUpdate4() {
        if (this.selectedGoodRows.length === 1) {
          const selectedGood = this.selectedGoodRows[0];
          axios.put('http://localhost:8080/goods',selectedGood)
                  .then(response =>{
                    if(response.data.code === 200){
                      ElMessage.success("修改成功")
                    }
                  })
                  .catch(error => ElMessage.error("修改失败",error))
        } else {
          ElMessage.error('请先选择一条记录');
        }
      },

      // 删除方法
      handleDelete4() {
        console.log(this.selectedGoodRows);
        if (this.selectedGoodRows.length > 0) {
          this.$confirm('确定删除选中的商品吗?', '提示', {
            type: 'warning',
          }).then(() => {
            const idList = this.selectedGoodRows.map((row) => row.id);
            const params = idList.map(id => `idList=${id}`).join('&');
            axios.delete(`http://localhost:8080/goods?${params}`)
                    .then((response) => {
                      ElMessage.success('删除成功');
                      this.getData4();
                    })
                    .catch((error) => {
                      ElMessage.error('删除失败');
                    });
          });
        } else {
          this.ElMessage.error('请先选择记录');
        }
      },

      // 查找方法
      handleSearch4() {
        axios.get('http://localhost:8080/goods/searchList', {
          params: {
            query: this.selectInput,
            page: this.currentPage,
            size: this.pageSize
          }
        })
                .then((response) => {
                  this.goodList = response.data.data.records;
                  this.total = response.data.data.total;
                })
                .catch((error) => {
                  console.error('查找失败', error);
                });
      },

      // 保存方法（新增或修改）
      handleSave4() {
        axios.post(`http://localhost:8080/goods`, this.form)
                .then((response) => {
                  ElMessage.success('保存成功');
                  this.dialogVisible = false;
                  this.getData4();
                })
                .catch((error) => {
                  ElMessage.error('保存失败');
                });
      },
      // 重置表单
      resetForm() {
        this.form = {};
      },
    }
  }).use(ElementPlus).mount('#app');
</script>
</html>